<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>

    <!--基本结构:
        1. form标签
        2. action: 表单提交的地址信息
        3. method: 表单提交方式
        4. input标签  要提交的内容
        5. 提交按钮    type=submit
    -->
   <!-- <form action="http://www.baidu.com"  method="表单的提交方式">
          用户名:  <input type="text" name="username" />
          <input type="submit"  value="提交"/>
    </form>-->

    <!--
        method提交方式:    1.get提交     参数拼接到url中  不安全    快
                          2.post提交    参数通过请求体的形式传递   安全   慢
        注意事项:
                1.所有用户填写的内容.必须有name属性!!
                2.name属性的属性值,一般见名知意
                3.name属性的值当作参数提交的key,用户输入的内容当作value
                   以?key=value的形式提交到服务器中
                4.如果需要为输入的内容赋值,可以通过value属性实现 value属性可以省略的
    -->
    <form action="服务器地址"  method="get">
        <!--1.文本输入框  用户可以再次输入内容  -->
       用户名:   <input type="text" name="username" value="123456"/><br>

        <!--2. 密码框-->
       密码: <input  type="password" name="password" value="123456" /><br>

        <!--3. 时间框,生日 html5以后,各个浏览器对date都有支持. 只是样式不同!!!
            不同的浏览器解析的效果不一样的. 所以为了统一建议使用时间类型的插件
          -->
        生日: <input type="date" name="birthday" /><br>

        <!--4. 单选框
            要求:
                1. 单选框中 必须添加value属性  (因为用户没有录入功能)
                2. 如果使用单选框 则name名称必须一致.
                3. 单选框的效果是互斥的.
                4. 单选框的展现内容 跟在input标签之后即可
        -->
        性别:
             <input type="radio" name="gender" value="男"/> 男1
             <input type="radio" name="gender" value="女" checked="checked" /> 女1
             <input type="radio" name="gender" value="其它" /> 其它1<br>


            <!--
                复选框:  type="checkbox"
                默认选中: checked="checked" 默认选中  适用于单选/多选
            -->
        爱好:
            <input type="checkbox" name="hobbies" value="敲代码" />敲代码
            <input type="checkbox" name="hobbies" value="打游戏" />打游戏
            <input type="checkbox" name="hobbies" value="喜欢美女/帅哥" checked="checked"/>喜欢美女/帅哥<br>


        <!--下拉列表-->
        所在城市:
            <select name="city">
                <!--option代表选择项-->
                <option value="">请选择所在城市</option>
                <option value="北京" selected="selected">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select><br>

        <!--文件输入框-->
        照片:
            <input type="file" name="photo"/><br>

        个人说明:
            <textarea name="info"  style="width: 40px;height: 40px"></textarea><br>


        <!--常见于 修改操作的ID数据提交时-->
        隐藏域:
              <input type="hidden"  name="id"  value="1001"/><br>

        <!--关于按钮的知识点
            type="submit"  用于提交,只能有一个!!!
            type="reset"   重置表格内容
            button标签      简化写法
        -->
        按钮写法:
            <input  type="button" value="普通按钮" />
            <button type="button">普通按钮2</button>

            <!--下列按钮在form表单中有效-->
            <input type="reset" value="重置"/>
            <input  type="submit"  value="提交"/>
    </form>









</body>
</html>